import { Graph, Dom, Node } from "@antv/x6";
import { basicPorts, customPorts } from "./ports";

// 基础节点
export const FlowChartRect = Graph.registerNode("flow-chart-rect", {
  inherit: "rect",
  width: 80,
  height: 42,
  attrs: {
    body: {
      stroke: "#2384DD",
      strokeWidth: 1,
      fill: "#2384DD",
    },
    fo: {
      refWidth: "100%",
      refHeight: "100%",
    },
    foBody: {
      xmlns: Dom.ns.xhtml,
      style: {
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      },
    },
    "edit-text": {
      contenteditable: "true",
      class: "x6-edit-text",
      style: {
        width: "100%",
        textAlign: "center",
        fontSize: 12,
        color: "rgba(0,0,0,0.85)",
      },
    },
    text: {
      fontSize: 12,
      fill: "#ffffff",
    },
  },
  markup: [
    {
      tagName: "rect",
      selector: "body",
    },
    {
      tagName: "text",
      selector: "text",
    },
    {
      tagName: "foreignObject",
      selector: "fo",
      children: [
        {
          ns: Dom.ns.xhtml,
          tagName: "body",
          selector: "foBody",
          children: [
            {
              tagName: "div",
              selector: "edit-text",
            },
          ],
        },
      ],
    },
  ],
  ports: { ...basicPorts },
});
// 背景+图片节点
// export const FlowChartImage = Graph.registerNode("flow-chart-image-node", {
//   inherit: "rect",
//   width: 200,
//   height: 60,
//   attrs: {
//     image: {
//       width: "100%",
//       height: "100%",
//       refWidth: "100%",
//       refHeight: "100%",
//       "xlink:href":
//         "https://cn.bing.com/images/search?view=detailV2&ccid=%2b34ZOx3w&id=3A928219641560C664840FA90E892701FC901BFB&thid=OIP.-34ZOx3wP4KeZnKue4L28gHaEo&mediaurl=https%3a%2f%2fwww.2008php.com%2f2011_Website_appreciate%2f2011-09-23%2f20110923163645.jpg&exph=900&expw=1440&q=%e5%9b%be%e7%89%87&simid=608040269231702359&FORM=IRPRST&ck=7D164F69A6DCCDAEF44BAC3D759B72B2&selectedIndex=5&itb=0",
//     },
//     body: {
//       stroke: "#5F95FF",
//       strokeWidth: 1,
//       fill: "#ffffff",
//     },
//     fo: {
//       refWidth: "100%",
//       refHeight: "100%",
//     },
//     foBody: {
//       xmlns: Dom.ns.xhtml,
//       style: {
//         width: "100%",
//         height: "100%",
//         display: "flex",
//         justifyContent: "center",
//         alignItems: "center",
//       },
//     },
//     "edit-text": {
//       contenteditable: "true",
//       class: "x6-edit-text",
//       style: {
//         width: "100%",
//         textAlign: "center",
//         fontSize: 12,
//         color: "rgba(0,0,0,0.85)",
//       },
//     },
//   },
//   markup: [
//     {
//       tagName: "rect",
//       selector: "body",
//     },
//     {
//       tagName: "text",
//       selector: "text",
//     },
//     {
//       tagName: "foreignObject",
//       selector: "fo",
//       children: [
//         {
//           ns: Dom.ns.xhtml,
//           tagName: "body",
//           selector: "foBody",
//           children: [
//             {
//               tagName: "div",
//               selector: "edit-text",
//             },
//           ],
//         },
//       ],
//     },
//   ],
//   ports: { ...basicPorts },
// });

// 组合节点 图片加文字
export const FlowChartImageRect = Graph.registerNode("flow-chart-image-rect", {
  inherit: "rect",
  width: 200,
  height: 60,
  attrs: {
    body: {
      stroke: "#5F95FF",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
    },
    image: {
      "xlink:href":
        "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
      width: 16,
      height: 16,
      x: 12,
      y: 12,
    },
    title: {
      text: "Node",
      refX: 40,
      refY: 14,
      fill: "#ffffff",
      fontSize: 12,
      "text-anchor": "start",
    },
    text: {
      text: "this is content text",
      refX: 40,
      refY: 38,
      fontSize: 12,
      fill: "#ffffff",
      "text-anchor": "start",
    },
  },
  markup: [
    {
      tagName: "rect",
      selector: "body",
    },
    {
      tagName: "image",
      selector: "image",
    },
    {
      tagName: "text",
      selector: "title",
    },
    {
      tagName: "text",
      selector: "text",
    },
  ],
  ports: { ...basicPorts },
});
// 带头部标题栏的节点
export const FlowChartTitleRect = Graph.registerNode("flow-chart-title-rect", {
  inherit: "rect",
  width: 200,
  height: 68,
  attrs: {
    body: {
      stroke: "#5F95FF",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
    },
    head: {
      refWidth: "100%",
      stroke: "transparent",
      height: 28,
      y: 0,
      fill: "rgb(95,149,255)",
    },
    // image: {
    //   "xlink:href":
    //     "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
    //   height: 16,
    //   x: 6,
    //   y: 6,
    // },
    title: {
      text: "Node",
      ref: "head", // 相对 head 定位
      refX: "50%",
      refY: "25%",
      textAnchor: "middle",
      dominantBaseline: "middle", // 实现垂直居中
      fill: "#ffffff",
      fontSize: 12,
    },
    text: {
      text: "this is content text",
      refX: 8,
      refY: 45,
      fontSize: 12,
      fill: "#ffffff",
      "text-anchor": "start",
    },
  },
  markup: [
    {
      tagName: "rect",
      selector: "body",
    },
    {
      tagName: "rect",
      selector: "head",
    },
    {
      tagName: "image",
      selector: "image",
    },
    {
      tagName: "text",
      selector: "title",
    },
    {
      tagName: "text",
      selector: "text",
    },
  ],
  ports: { ...basicPorts },
});
// 带动画的文字节点
export const FlowChartAnimateText = Graph.registerNode(
  "flow-chart-animate-text",
  {
    inherit: "rect",
    width: 200,
    height: 60,
    attrs: {
      body: {
        stroke: "#5F95FF",
        strokeWidth: 1,
        fill: "rgba(95,149,255,0.05)",
      },
      text1: {
        class: "animate-text1",
        text: "AntV X6",
        fontSize: 32,
      },
      text2: {
        class: "animate-text2",
        text: "AntV X6",
        fontSize: 32,
      },
    },
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "text",
        selector: "text1",
      },
      {
        tagName: "text",
        selector: "text2",
      },
    ],
  }
);

// 自定义 系统设计图
export const FlowChartImageRectCustom = Graph.registerNode(
  "flow-chart-image-rect-custom",
  {
    inherit: "rect",
    width: 80,
    height: 80,
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "image",
      },
      {
        tagName: "text",
        selector: "label",
      },
    ],
    attrs: {
      body: {
        // 节点线的颜色
        stroke: "transparent",
        // 背景填充色
        fill: "transparent",
      },
      // 自定义图片
      image: {
        width: 60,
        height: 60,
        refX: 0,
        refY: 0,
      },
      label: {
        refX: 3,
        refY: 2,
        textAnchor: "left",
        textVerticalAnchor: "top",
        fontSize: 12,
        fill: "black",
      },
      "edit-text": {
        contenteditable: "true",
        class: "x6-edit-text",
        style: {
          width: "100%",
          textAlign: "center",
          fontSize: 12,
          color: "rgba(0,0,0,0.85)",
        },
      },
      text: {
        fontSize: 12,
        fill: "#080808",
      },
    },
    ports: { ...customPorts },
  }
);

// 节点组 （自定义节点组可折叠）头部有标题和按钮+可折叠
export class NodeGroup extends Node {
  collapsed = true;

  postprocess() {
    this.toggleCollapse(true);
  }

  isCollapsed() {
    return this.collapsed;
  }

  toggleCollapse(collapsed) {
    const target = collapsed == null ? !this.collapsed : collapsed;
    if (target) {
      this.attr("buttonSign", { d: "M 1 5 9 5 M 5 1 5 9" });
      this.resize(200, 40);
    } else {
      this.attr("buttonSign", { d: "M 2 5 8 5" });
      this.resize(240, 240);
    }
    this.collapsed = target;
  }
}
NodeGroup.config({
  shape: "rect",
  width: 200,
  height: 68,
  markup: [
    {
      tagName: "rect",
      selector: "head",
    },
    {
      tagName: "rect",
      selector: "body",
    },
    {
      tagName: "image",
      selector: "image",
    },
    {
      tagName: "text",
      selector: "text",
    },
    {
      tagName: "g",
      selector: "buttonGroup",
      children: [
        {
          tagName: "rect",
          selector: "button",
          attrs: {
            "pointer-events": "visiblePainted",
          },
        },
        {
          tagName: "path",
          selector: "buttonSign",
          attrs: {
            fill: "none",
            "pointer-events": "none",
          },
        },
      ],
    },
  ],
  embeddable: true,
  attrs: {
    body: {
      refWidth: "100%",
      refHeight: "100%",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF",
    },
    // image: {
    //   "xlink:href":
    //     "https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ",
    //   width: 16,
    //   height: 16,
    //   x: 8,
    //   y: 12,
    // },
    head: {
      refWidth: "100%",
      stroke: "transparent",
      height: 28,
      fill: "rgb(95,149,255)",
    },
    // image: {
    //   "xlink:href":
    //     "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
    //   height: 16,
    //   x: 6,
    //   y: 6,
    // },
    title: {
      text: "Node",
      ref: "head",
      refX: "50%",
      refY: "50%", // 或 25% 如果你觉得偏下
      textAnchor: "middle",
      dominantBaseline: "middle",
      fill: "#ffffff",
      fontSize: 12,
    },
    text: {
      fontSize: 12,
      fill: "#ffffff",
      ref: "body",
      refX: "5%",
      refY: "15%",
    },
    buttonGroup: {
      refX: "100%",
      refX2: -25,
      refY: 13,
    },
    button: {
      height: 14,
      width: 16,
      rx: 2,
      ry: 2,
      fill: "#f5f5f5",
      stroke: "#ccc",
      cursor: "pointer",
      event: "node:collapse",
    },
    buttonSign: {
      refX: 3,
      refY: 2,
      stroke: "#808080",
    },
  },
  ports: { ...basicPorts },
});
Graph.registerNode("groupNode", NodeGroup);
// 纯展示用的节点组（不可折叠）头部+无折叠
export class NodeGroupSimple extends Node {}

NodeGroupSimple.config({
  shape: "rect",
  width: 200,
  height: 68,
  markup: [
    { tagName: "rect", selector: "head" },
    { tagName: "rect", selector: "body" },
    { tagName: "text", selector: "title" },
    { tagName: "text", selector: "text" },
  ],
  embeddable: true,
  attrs: {
    body: {
      refWidth: "100%",
      refHeight: "100%",
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF",
      strokeWidth: 1,
    },
    head: {
      refWidth: "100%",
      height: 28,
      fill: "rgb(95,149,255)",
      stroke: "transparent",
    },
    title: {
      text: "Group Title",
      refX: "50%",
      refY: 14,
      textAnchor: "middle",
      dominantBaseline: "middle",
      fill: "#ffffff",
      fontSize: 12,
    },
    text: {
      text: "描述文字",
      refX: "5%",
      refY: "35%",
      fontSize: 12,
      fill: "#ffffff",
      textAnchor: "start",
    },
  },
  ports: { ...basicPorts },
});

// 注册
Graph.registerNode("groupNodeSimple", NodeGroupSimple);
// 纯展示用的节点组（不可折叠，无头部）
export class NodeGroupSimpleNoHead extends Node {}
// 无头部+无折叠
NodeGroupSimpleNoHead.config({
  shape: "rect",
  markup: [
    { tagName: "rect", selector: "body" },
    { tagName: "text", selector: "text" },
  ],
  width: 200,
  height: 68,
  embeddable: true,
  attrs: {
    body: {
      refWidth: "100%",
      refHeight: "100%",
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF",
      strokeWidth: 1,
    },
    text: {
      text: "描述文字",
      refX: "5%",
      refY: "10%",
      fontSize: 12,
      fill: "#ffffff",
      textAnchor: "start",
    },
  },
  ports: { ...basicPorts },
});

Graph.registerNode("groupNodeSimpleNoHead", NodeGroupSimpleNoHead);
export class NodeGroupCollapsibleNoHead extends Node {
  collapsed = true;

  postprocess() {
    this.toggleCollapse(true);
  }

  isCollapsed() {
    return this.collapsed;
  }

  toggleCollapse(collapsed) {
    const target = collapsed == null ? !this.collapsed : collapsed;
    if (target) {
      this.attr("buttonSign", { d: "M 1 5 9 5 M 5 1 5 9" });
      this.resize(200, 40);
    } else {
      this.attr("buttonSign", { d: "M 2 5 8 5" });
      this.resize(240, 240);
    }
    this.collapsed = target;
  }
}

NodeGroupCollapsibleNoHead.config({
  shape: "rect",
  width: 200,
  height: 68,
  markup: [
    { tagName: "rect", selector: "body" },
    { tagName: "text", selector: "text" },
    {
      tagName: "g",
      selector: "buttonGroup",
      children: [
        {
          tagName: "rect",
          selector: "button",
          attrs: {
            "pointer-events": "visiblePainted",
          },
        },
        {
          tagName: "path",
          selector: "buttonSign",
          attrs: {
            fill: "none",
            "pointer-events": "none",
          },
        },
      ],
    },
  ],
  embeddable: true,
  attrs: {
    body: {
      refWidth: "100%",
      refHeight: "100%",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF",
    },
    text: {
      fontSize: 12,
      fill: "#ffffff",
      refX: "5%",
      refY: "15%",
    },
    buttonGroup: {
      refX: "100%",
      refX2: -25,
      refY: 13,
    },
    button: {
      height: 14,
      width: 16,
      rx: 2,
      ry: 2,
      fill: "#f5f5f5",
      stroke: "#ccc",
      cursor: "pointer",
      event: "node:collapse",
    },
    buttonSign: {
      refX: 3,
      refY: 2,
      stroke: "#808080",
    },
  },
  ports: { ...basicPorts },
});
Graph.registerNode("groupNodeCollapsibleNoHead", NodeGroupCollapsibleNoHead);
// 注册节点组有header 用户自定义的无折叠，头部是以图片为背景的节点组
export class NodeGroupWithHeaderImage extends Node {}

NodeGroupWithHeaderImage.config({
  shape: "rect",
  width: 200,
  height: 100,
  markup: [
    { tagName: "rect", selector: "head" },
    { tagName: "image", selector: "headerBg" },
    { tagName: "rect", selector: "body" },
    { tagName: "text", selector: "title" },
    { tagName: "text", selector: "description" },
  ],
  embeddable: true,
  attrs: {
    // 头部矩形（只是用来确定 header 的 bbox，也可以把 fill 设成透明）
    head: {
      refWidth: "100%",
      height: "40",
      x: 0,
      y: 0,
      fill: "transparent",
      stroke: "none",
    },
    // ✅ 关键：图片绑定到 head 上，这样就不会“超了”
    headerBg: {
      "xlink:href": require("@/assets/header-bg.png"),
      ref: "head",
      refX: 0,
      refY: 0,
      refWidth: "100%",
      refHeight: "100%",
      preserveAspectRatio: "none", // ✅ 铺满容器，不裁剪
    },
    // 主体区域矩形，下移 40px，避免覆盖头部
    body: {
      refWidth: "100%",
      // 这里用固定高度最简单。如果你希望节点高度可变，请看后面的“动态高度”写法
      refHeight: "60%", // 100(总高) - 40(头高) = 60
      x: 0,
      y: 40, // ✅ 往下移
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF",
      strokeWidth: 1,
    },
    title: {
      text: "组标题",
      refX: "50%",
      refY: "10%",
      textAnchor: "middle",
      dominantBaseline: "middle",
      fill: "#fff",
      fontSize: 14,
      fontWeight: "bold",
      pointerEvents: "none",
    },
    description: {
      text: "描述内容",
      refX: 10,
      refY: 60, // 放到 body 里面（40 + 一点 margin）
      textAnchor: "start",
      fontSize: 12,
      fill: "#ffffff",
      pointerEvents: "none",
    },
  },
  ports: {
    groups: {
      top: {
        position: "top",
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
          },
        },
      },
    },
    items: [],
  },
});

Graph.registerNode("groupNodeWithHeaderImage", NodeGroupWithHeaderImage);
